<template>
  <div class="header">
    <input v-model="title" @keyup.enter="addTodo">
  </div>
</template>

<script>
export default {
  name: 'todoHeader',
  props: {
    add: Function,
    default: () => ({}),
  },
  data() {
    return {
      title: '',
    };
  },
  methods: {
    addTodo() {
      const title = this.title.trim();
      if (!title || title === '') {
        return alert('请输入Todo！');
      }
      this.title = '';
      this.add({
        id: Math.random().toString(36).slice(2),
        title,
        checked: false,
      });
    },
  },
};
</script>